<!DOCTYPE html>
<html prefix="og: http://ogp.me/ns#">
<head>
  <meta charset="UTF-8">
  <title>Style variables</title>
  <link data-turbolinks-track="true" href="../../assets/application-b86a2086c99917c6bf2a9d74b4038381.css" media="all" rel="stylesheet" />
  <script data-turbolinks-track="true" src="../../assets/application-c3106c6fe52ccec6f26495730a478cca.js"></script>
  <meta content="authenticity_token" name="csrf-param" />
<meta content="yzXUiWH6GiCHbvbJOg7usjzA7LawyxwB+oJHEcWTOIM=" name="csrf-token" />
  <script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-3769691-35', 'atom.io');
  ga('send', 'pageview');

</script>

  <meta property="og:url" content="https://atom.io/" />
<meta property="og:site_name" content="Atom" />
<meta property="og:title" content="A hackable text editor for the 21st Century" />
<meta property="og:description" content="At GitHub, we’re building the text editor we’ve always wanted: hackable to the core, but approachable on the first day without ever touching a config file. We can’t wait to see what you build with it." />
<meta property="og:type" content="website" />
<meta property="og:author" content='https://www.facebook.com/GitHub' />
<meta property="og:image" content="http://og.github.com/atom-logo/atom-logo@1200x1200.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="1200" />
<meta property="og:image" content="http://og.github.com/atom-mark/atom-mark@1200x630.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

  <meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:site" content="@AtomEditor" />
<meta property="twitter:creator" content='@github' />
<meta property="twitter:title" content="Atom" />
<meta property="twitter:description" content="A hackable text editor for the 21st Century" />
<meta property="twitter:image:src" content="http://og.github.com/atom-logo/atom-logo@1200x630.png" />
<meta property="twitter:image:width" content="1200" />
<meta property="twitter:image:height" content="630" />

  <link rel="shortcut icon" href="../../favicon.ico"/>
</head>
<body>

  <div class="footer-push">
    
    

    <header class="header">
  <div class="wrapper">
    <h1 title="Atom">
      <a href="../../index.html" class="logo"></a>
    </h1>

    <ul class="navigation">
      <li><a class="" href="../../packages.html">Packages</a></li>
      <li><a class="is-selected" href="../latest/index.html">Documentation</a></li>
      <li><a href="http://blog.atom.io">Blog</a></li>
      <li><a href="../../faq.html">FAQ</a></li>
      <li><a class="" href="https://atom.io/contact">Contact</a></li>
    </ul>
  </div>
</header>


    <div class="wrapper documents content-push">
  <div class="columns">
    <div class="column main-column markdown">
        <h1>
<a name="style-variables" href="theme-variables.html#style-variables"></a>Style variables</h1>

<p>Atom's UI provides a set of variables you can use in your own themes and packages.</p>

<h2>
<a name="use-in-themes" href="theme-variables.html#use-in-themes"></a>Use in Themes</h2>

<p>Each custom theme must specify a <code>ui-variables.less</code> file with all of the
following variables defined. The top-most theme specified in the theme settings
will be loaded and available for import.</p>

<h2>
<a name="use-in-packages" href="theme-variables.html#use-in-packages"></a>Use in Packages</h2>

<p>In any of your package's <code>.less</code> files, you can access the theme variables
by importing the <code>ui-variables</code> file from Atom.</p>

<p>Your package should generally only specify structural styling, and these should
come from <a href="https://github.com/atom/styleguide">the style guide</a>. Your package shouldn't specify colors,
padding sizes, or anything in absolute pixels. You should instead use the theme
variables. If you follow this guideline, your package will look good out of the
box with any theme!</p>

<p>Here's an example <code>.less</code> file that a package can define using theme variables:</p>

<pre lang="css"><div class="line"><span class="source css"><span class="meta at-rule import css"><span class="keyword control at-rule import css"><span class="punctuation definition keyword css"><span>@</span></span><span>import</span></span><span> </span><span class="string quoted double css"><span class="punctuation definition string begin css"><span>"</span></span><span>ui-variables</span><span class="punctuation definition string end css"><span>"</span></span></span></span><span>;</span></span></div><div class="line"><span class="source css"><span> </span></span></div><div class="line"><span class="source css"><span class="meta selector css"><span class="entity other attribute-name class css"><span class="punctuation definition entity css"><span>.</span></span><span>my-selector</span></span></span><span class="meta property-list css"><span class="punctuation section property-list begin css"><span>{</span></span></span></span></div><div class="line"><span class="source css"><span class="meta property-list css"><span>  </span><span class="meta property-name css"><span class="support type property-name css"><span>background-color</span></span></span><span class="meta property-value css"><span class="punctuation separator key-value css"><span>:</span></span><span> </span><span>@base-background-color</span><span class="punctuation terminator rule css"><span>;</span></span></span></span></span></div><div class="line"><span class="source css"><span class="meta property-list css"><span>  </span><span class="meta property-name css"><span class="support type property-name css"><span>padding</span></span></span><span class="meta property-value css"><span class="punctuation separator key-value css"><span>:</span></span><span> </span><span>@component-padding</span><span class="punctuation terminator rule css"><span>;</span></span></span></span></span></div><div class="line"><span class="source css"><span class="meta property-list css"><span class="punctuation section property-list end css"><span>}</span></span></span></span></div></pre>

<h2>
<a name="variables" href="theme-variables.html#variables"></a>Variables</h2>

<h3>
<a name="text-colors" href="theme-variables.html#text-colors"></a>Text colors</h3>

<ul>
<li><code>@text-color</code></li>
<li><code>@text-color-subtle</code></li>
<li><code>@text-color-highlight</code></li>
<li><code>@text-color-selected</code></li>
<li>
<code>@text-color-info</code> - A blue</li>
<li>
<code>@text-color-success</code>- A green</li>
<li>
<code>@text-color-warning</code>- An orange or yellow</li>
<li>
<code>@text-color-error</code> - A red</li>
</ul><h3>
<a name="background-colors" href="theme-variables.html#background-colors"></a>Background colors</h3>

<ul>
<li>
<code>@background-color-info</code> - A blue</li>
<li>
<code>@background-color-success</code> - A green</li>
<li>
<code>@background-color-warning</code> - An orange or yellow</li>
<li>
<code>@background-color-error</code> - A red</li>
<li><code>@background-color-highlight</code></li>
<li><code>@background-color-selected</code></li>
<li>
<code>@app-background-color</code> - The app's background under all the editor components</li>
</ul><h3>
<a name="component-colors" href="theme-variables.html#component-colors"></a>Component colors</h3>

<ul>
<li>
<code>@base-background-color</code> -</li>
<li><p><code>@base-border-color</code> -</p></li>
<li><p><code>@pane-item-background-color</code> -</p></li>
<li><p><code>@pane-item-border-color</code> -</p></li>
<li><p><code>@input-background-color</code> -</p></li>
<li><p><code>@input-border-color</code> -</p></li>
<li><p><code>@tool-panel-background-color</code> -</p></li>
<li><p><code>@tool-panel-border-color</code> -</p></li>
<li><p><code>@inset-panel-background-color</code> -</p></li>
<li><p><code>@inset-panel-border-color</code> -</p></li>
<li><p><code>@panel-heading-background-color</code> -</p></li>
<li><p><code>@panel-heading-border-color</code> -</p></li>
<li><p><code>@overlay-background-color</code> -</p></li>
<li><p><code>@overlay-border-color</code> -</p></li>
<li><p><code>@button-background-color</code> -</p></li>
<li><p><code>@button-background-color-hover</code> -</p></li>
<li><p><code>@button-background-color-selected</code> -</p></li>
<li><p><code>@button-border-color</code> -</p></li>
<li><p><code>@tab-bar-background-color</code> -</p></li>
<li><p><code>@tab-bar-border-color</code> -</p></li>
<li><p><code>@tab-background-color</code> -</p></li>
<li><p><code>@tab-background-color-active</code> -</p></li>
<li><p><code>@tab-border-color</code> -</p></li>
<li><p><code>@tree-view-background-color</code> -</p></li>
<li><p><code>@tree-view-border-color</code> -</p></li>
<li><p><code>@ui-site-color-1</code> -</p></li>
<li><p><code>@ui-site-color-2</code> -</p></li>
<li><p><code>@ui-site-color-3</code> -</p></li>
<li><p><code>@ui-site-color-4</code> -</p></li>
<li><p><code>@ui-site-color-5</code> -</p></li>
</ul><h3>
<a name="component-sizes" href="theme-variables.html#component-sizes"></a>Component sizes</h3>

<ul>
<li><p><code>@disclosure-arrow-size</code> -</p></li>
<li><p><code>@component-padding</code> -</p></li>
<li><p><code>@component-icon-padding</code> -</p></li>
<li><p><code>@component-icon-size</code> -</p></li>
<li><p><code>@component-line-height</code> -</p></li>
<li><p><code>@component-border-radius</code> -</p></li>
<li><p><code>@tab-height</code> -</p></li>
</ul><h3>
<a name="fonts" href="theme-variables.html#fonts"></a>Fonts</h3>

<ul>
<li>
<code>@font-size</code> -</li>
<li>
<code>@font-family</code> -</li>
</ul>
    </div>
    <div class="column sidebar documents-toc">
      <select class="js-doc-version-switcher version-switcher">
  <option selected="selected" value="v0.69.0">v0.69.0</option>
<option value="v0.68.0">v0.68.0</option>
<option value="v0.67.0">v0.67.0</option>
<option value="v0.66.0">v0.66.0</option>
<option value="v0.65.0">v0.65.0</option>
<option value="v0.64.0">v0.64.0</option>
<option value="v0.63.0">v0.63.0</option>
<option value="v0.62.0">v0.62.0</option>
<option value="v0.61.0">v0.61.0</option>
<option value="v0.60.0">v0.60.0</option>
<option value="v0.59.0">v0.59.0</option>
<option value="v0.58.0">v0.58.0</option>
<option value="v0.57.0">v0.57.0</option>
<option value="v0.56.0">v0.56.0</option>
<option value="v0.55.0">v0.55.0</option>
<option value="v0.54.0">v0.54.0</option>
<option value="v0.53.0">v0.53.0</option>
<option value="v0.51.0">v0.51.0</option>
<option value="v0.50.0">v0.50.0</option>
<option value="v0.49.0">v0.49.0</option>
<option value="v0.48.0">v0.48.0</option>
<option value="v0.47.0">v0.47.0</option>
<option value="v0.46.0">v0.46.0</option>
<option value="v0.45.0">v0.45.0</option>
<option value="v0.44.0">v0.44.0</option>
<option value="v0.41.0">v0.41.0</option>
<option value="v0.40.0">v0.40.0</option>
<option value="0.52.0">0.52.0</option>
</select>


      <ul class="navigation">
        <li><a href="" class="is-selected">Documentation</a></li>
        <li><a href="../api/v0.69.0/api/index.html">API</a></li>
      </ul>

      <hr />

      <form accept-charset="UTF-8" action="/docs/v0.69.0/search" method="get"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /></div>
        <input class="sidebar-search-field" id="q" name="q" placeholder="Search documentation" type="text" value="" />
</form>
      <h2>
<a name="guides" href="theme-variables.html#guides"></a>Guides</h2>

<ul>
<li><a href="getting-started.html">Getting Started</a></li>
<li><a href="customizing-atom.html">Customizing Atom</a></li>
<li><a href="creating-a-package.html">Creating a Package</a></li>
<li><a href="creating-a-theme.html">Creating a Theme</a></li>
<li><a href="publishing-a-package.html">Publishing a Package</a></li>
<li><a href="converting-a-text-mate-bundle.html">Converting a TextMate Bundle</a></li>
<li><a href="converting-a-text-mate-theme.html">Converting a TextMate Theme</a></li>
<li><a href="contributing.html">Contributing</a></li>
</ul><h3>
<a name="advanced-topics" href="theme-variables.html#advanced-topics"></a>Advanced Topics</h3>

<ul>
<li><a href="advanced/configuration.html">Configuration</a></li>
<li><a href="advanced/keymaps.html">Keymaps</a></li>
<li><a href="advanced/serialization.html">Serialization</a></li>
<li><a href="advanced/view-system.html">View System</a></li>
</ul>
    </div>
  </div>
</div>


    <div class="footer-pad"></div>
  </div>

  <footer>
  <div class="footer">
    <div class="wrapper">
      <ul class="footer-left">
        <li><a href="../../terms.html">Terms of Use</a></li>
          <li><a href="https://atom.io/login">Sign in</a></li>
      </ul>

      <div class="footer-right">
        <a href="https://github.com"><span class="octicon octicon-code"></span> with <span class="octicon octicon-heart"></span> by <span class="octicon octicon-logo-github"></span></a>
      </div>
    </div>
  </div>
</footer>

</body>
</html>
